import React from 'react';
// 高阶组件需要用withRouter包裹一下
import { withRouter } from 'umi';
// 引入动画库的俩个组件
import { TransitionGroup, CSSTransition } from 'react-transition-group';

// 根据前进还是后退显示不同的转场动画效果
const ANIMATION_MAP: any = {
  PUSH: 'forward',
  POP: 'back',
};

document.getElementsByClassName('typing_loader')[0].style.display = 'none';

export default withRouter(({ location, children, history }: any) => {
  return (
    // 这个组件的详细应用 见官网 这里就直接写现成的了
    <TransitionGroup
      childFactory={(child) =>
        React.cloneElement(child, { classNames: ANIMATION_MAP[history.action] })
      }
    >
      <CSSTransition key={location.pathname} timeout={300}>
        {children}
      </CSSTransition>
    </TransitionGroup>
  );
});
